<!DOCTYPE html>
<!-- 文档类型声明，告诉浏览器这是一个HTML5文档 -->

<html lang="zh-CN">
<!-- html标签是所有HTML元素的容器，lang属性定义了文档的语言 -->

<head>
    <!-- head标签包含文档的元数据，如标题、字符集、视口设置等 -->
    <meta charset="UTF-8">
    <!-- 定义文档的字符编码为UTF-8，支持各种语言字符 -->
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 视口设置，使网页在移动设备上能正确缩放 -->
    
    <title>2025全球100榜单</title>
    <!-- 定义网页标题，会显示在浏览器标签页上 -->
</head>

<body>
    <!-- body标签包含网页的全部可见内容 -->
    
    <!-- main标签表示文档的主要内容区域 -->
    <main>
        <!-- 顶部横幅区域 - 包含背景图片和标题文本 -->
        <header>
            <!-- header标签表示内容的介绍或导航区域 -->
            <img src="placeholder-banner.jpg" alt="榜单图片">
            <!-- img标签显示图片，src指定图片路径，alt提供替代文本 -->
            
            <div>
                <!-- div是一个通用容器，用于组织和样式化内容 -->
                <p>携程口碑榜</p>
                <!-- p标签表示一个文本段落 -->
                
                <h1>2025全球100</h1>
                <!-- h1标签表示最高级别的标题 -->
            </div>
        </header>
        
        <!-- 主导航栏区域 - 酒店、景点等主要分类 -->
        <nav class="main-nav">
            <!-- nav标签定义导航链接的部分 -->
            <ul>
                <!-- ul标签定义无序列表 -->
                <li><a href="#">酒店</a></li>
                <!-- li是列表项，a是超链接，href属性指定链接目标，#表示空链接 -->
                <li><a href="#" class="active">景点</a></li>
                <!-- class="active"表示当前激活的选项 -->
                <li><a href="#">夜游</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">目的地</a></li>
            </ul>
        </nav>
        
        <!-- 二级导航/筛选区域 - 更细粒度的分类选项 -->
        <nav class="sub-nav">
            <!-- 第二个导航区域，用于子类别 -->
            <ul>
                <li><a href="#">必打卡</a></li>
                <li><a href="#">亲子</a></li>
                <li><a href="#">富花腾香</a></li>
                <li><a href="#">玩水避暑</a></li>
                <li><a href="#">赏秋</a></li>
                <li><a href="#"><span>更多</span> ▼</a></li>
            </ul>
        </nav>
        
        <!-- 筛选条件区域 -->
        <section class="filters">
            <!-- section标签表示文档中的一个独立部分 -->
            <div>全球 ▼</div>
            <!-- ▼是Unicode字符，表示下拉箭头 -->
            
            <div>位置/区域 ▼</div>
            <!-- 每个div都是一个筛选选项 -->
        </section>
        
        <!-- 目的地列表容器 -->
        <section class="destinations">
            <!-- 目的地卡片 - 每个目的地一个article -->
            <article>
                <!-- article标签表示独立的、完整的内容单元 -->
                
                <!-- 目的地图片区域 -->
                <figure>
                    <!-- figure标签表示独立的图像内容 -->
                    <img src="placeholder-disney.jpg" alt="华特迪士尼世界">
                    <!-- 图片元素，显示迪士尼世界照片 -->
                </figure>
                
                <!-- 目的地信息区域 -->
                <div class="dest-info">
                    <!-- 标题区域 -->
                    <h2>华特迪士尼世界 <small>Walt Disney World Resort</small></h2>
                    <!-- h2是二级标题，small表示旁注或小字体内容 -->
                    
                    <!-- 评分和价格信息 -->
                    <div class="rating">
                        <span class="score">4.7分</span> 
                        <span class="price-info">| 美国·佛罗里达</span>
                    </div>
                    
                    <!-- 上榜理由和描述 -->
                    <div class="description">
                        <p>上榜理由: 四次被评选受欢迎的主题乐园</p>
                        <p>✈ 3条路线畅玩电车往返迪士尼世界</p>
                        <!-- ✈ 是Unicode字符，表示飞机符号 -->
                    </div>
                    
                    <!-- 标签信息和点赞数 -->
                    <div class="tags">
                        <span class="attraction-tag">✦ 吸引最成功的5C景点</span>
                        <!-- ✦ 是Unicode字符，表示星号或标记 -->
                        <span class="likes">| 1983人收藏</span>
                    </div>
                    
                    <!-- 底部操作区域 -->
                    <footer>
                        <!-- footer标签表示区域的底部内容 -->
                        <div class="actions">
                            <span>口碑榜·适合2-6人·查看探访</span>
                            <!-- 底部信息和操作选项 -->
                        </div>
                    </footer>
                </div>
            </article>
        </section>
    </main>

    <!-- 
    HTML5语义化标签说明:
    - main: 网页的主要内容区域
    - header: 介绍性内容或导航链接的容器
    - nav: 导航链接的部分
    - section: 文档中的一个独立部分
    - article: 独立的、完整的内容单元
    - figure: 独立的图像内容
    - footer: 区域的底部内容
    
    基本元素说明:
    - div: 通用容器，无特殊语义
    - p: 段落文本
    - h1, h2: 标题，数字表示重要性级别
    - ul: 无序列表
    - li: 列表项
    - a: 超链接
    - img: 图片
    - span: 行内容器，用于标记文本的一部分
    -->
</body>
</html> 